<template>
    <div id="company-intro">
        <div id="intro-left">
            <div>
                <p class="title">公司福利</p>
                <div class="fuli-btn">
                    <!-- <div>五险一金</div>
                    <div>9：00-16：00</div>
                    <div>下午茶</div>
                    <div>零食节</div> -->
                </div>
                <div>
                    <!-- <p class="texts">其他福利：</p>
                    <p class="texts">股权激励制度</p> -->
                </div>
            </div>
            <div>
                <p class="title">公司简介</p>
                <!-- <div>
                    <p class="texts">阿里巴巴集团的使命是让天下没有难做的生意。</p>
                    <p class="texts">我们旨在赋能企业改变营销、销售和经营的方式。我们为商家、品牌及其他企业提供基本的互联网基础设施以及营销平台，让其可借助互联网的力量与用户和客户互动。我们的业务包括核心电商、云计算、数字媒体和娱乐以及创新项目和其他业务。我们并通过子公司菜鸟网络及所投资的关联公司口碑，参与物流和本地服务行业，同时与蚂蚁金融服务集团有战略合作，该金融服务集团主要通过中国领先的第三方网上支付平台支付宝运营。</p>
                </div> -->
            </div>
            <div>
                <p class="title">公司地址</p>
                <div v-for="(i,index) in 1" :key="i">
                    <div class="locate-bottom mapshows" @click="mapclick(index)"
                    :class="{maphides:mapIndexs === index}">
                        <p class="texts">
                            <span class="locate-detail">
                                {{addrIn.proName}}-{{addrIn.cityName}}-{{addrIn.areaName}}
                            </span>
                            {{addrIn.address}}
                        </p>
                        <img src="../../assets/companyDetail/箭头下.png" alt="">
                    </div>
                    <div class="com-map maphide" :class="{mapshow:mapIndexs === index}"
                    @click="mapclick(index)">
                        <p class="texts">
                            <span class="locate-detail">
                                {{addrIn.proName}}-{{addrIn.cityName}}-{{addrIn.areaName}}
                            </span>
                            {{addrIn.address}}
                        </p>
                        <img src="../../assets/companyDetail/箭头上.png" alt="">
                        <div class="map" id="container">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="intro-right">
            <!-- <p class="title">相似公司</p>
            <div>
                <div v-for="i in 4" :key="i" class="similar-company">
                    <div>
                        <div style="display:inline-block;">
                            <p class="txyx">腾讯游戏</p>
                            <p class="texts">已上市 | 互联网</p>
                        </div>
                        <div class="com-tx"></div>
                    </div>
                    <div class="s-bottom">
                        <p>
                            在招<span class="locate-detail">UI设计师</span>等<span class="locate-detail">12</span>个岗位
                        </p>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import {getCompanyList} from '../../api/companyList'
import AMap from 'AMap' // 引入高德地图
export default {
    name:'company-intro',
    data() {
        return {
            mapIndexs:0,
            inPageIndex:0,
            lat:'',
            lng:'',
            comname:"",
            c:{},
            addrIn:{}
        }
    },
    created(){
        this.getParams();
    },
    methods: {
        mapclick(index){
            if(this.mapIndexs == index){
                this.mapIndexs = -1;
            }
            else{
                this.mapIndexs = index;
            }
            console.log(this.mapIndexs)
        },
        getParams(){
            this.pages = this.$route.query.pages;
            if(this.pages == ''){
                this.comname = this.$route.query.comName;
                console.log(this.comname)
                getCompanyList(1,null,null,null,null,this.comname).then(res => {
                    console.log(res.data.data[0]);
                    this.c = res.data.data[0];
                    this.addrIn = res.data.data[0].addr;
                    // console.log(this.company.addr.address)
                    this.lat = this.c.addr.lat;
                    this.lng = this.c.addr.lng;
                    // console.log(this.lat,this.lng)
                    this.init()
                })
            }
            else{
                getCompanyList(this.pages).then(res => {
                    this.inPageIndex = this.$route.query.inPageIndex;
                    // console.log(res.data.data[this.inPageIndex]);
                    this.company = res.data.data[this.inPageIndex]
                    this.addrIn = res.data.data[0].addr;
                    console.log(this.company)
                    this.lat = this.company.addr.lat;
                    this.lng = this.company.addr.lng;
                    this.init()
                })
            }
		},
        init () {
            // console.log(this.lng, this.lat)
            let map = new AMap.Map('container', {
                center: [this.lng, this.lat],
                resizeEnable: true,
                zoom: 15
            })
            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
                position: new AMap.LngLat(this.lng, this.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                // title: '北京'
            });

            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
        }
    },
}
</script>
<style>
#company-intro{
    padding-bottom: 68px;
    width: 1184px;
    margin:0 auto;
}

#company-intro .title{
    color: #273B4E;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    margin-top: 36px;
}

#company-intro .texts{
    color: #646A7E;
    font-size: 14px;
    line-height: 28px;
}

#company-intro .locate-detail{
    color: #1958FB;
}

#intro-left{
    /* width: 868px;
    margin-right: 32px;
    display: inline-block;
    vertical-align:top; */
    border: none !important;
}

#intro-left .fuli-btn{
    margin-bottom: 20px;
}

#intro-left .fuli-btn div{
    height: 24px;
    border-radius: 12px;
    border: 1px solid #3979FF;
    display: inline-block;
    margin-right: 16px;
    padding: 0 10px;
    box-sizing: border-box;
    color: #3979FF;
    line-height: 24px;
}

#intro-left .com-map{
    width: 868px;
    height: 254px;
    background-color: #F7FBFF;
    padding-top: 6px;
    box-sizing: border-box;
    position: relative;
}

#intro-left .com-map p{
    display: inline-block;
}

#intro-left .com-map img{
    width: 14px;
    position: absolute;
    top: 12px;
    left: 846px;
}

#intro-left .com-map .map{
    width: 852px;
    height: 206px;
    margin: 6px 8px 8px 8px;
    background-color: yellowgreen;
}

#intro-left .locate-bottom{
    margin-top: 8px;
    position: relative;
}

#intro-left .locate-bottom p{
    display: inline-block;
}

#intro-left .locate-bottom img{
    width: 14px;
    position: absolute;
    top: 4px;
    left: 846px;
}

#intro-right{
    width: 284px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

#intro-right .similar-company{
    width: 284px;
    height: 140px;
    border: 1px solid #F3F5FB;
    margin-bottom: 16px;
    padding:26px 20px 16px 20px;
    box-sizing: border-box;
}

#intro-right .similar-company .txyx{
    font-size: 16px;
    color: #141419;
    font-weight: bold;
    margin-bottom: 9px;
}

#intro-right .similar-company .com-tx{
    width: 48px;
    height: 48px;
    border-radius: 2px;
    border: 1px solid #F3F5FB;
    background-color: wheat;
    display: inline-block;
    float: right;
}

#intro-right .similar-company .s-bottom{
    border-top: 1px dashed #DCE3E8;
    font-size: 12px;
    color: #99A0AB;
    padding-top: 15px;
    margin-top: 9px;
}

.mapshow{
    display: block !important;
}

.maphide{
    display: none;
}

.mapshows{
    display: block;
}

.maphides{
    display: none !important;
}
</style>